<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		label{
			width: 150px;
			display: inline-block;
			text-align: right;
			font-weight: 800;

		}
		.item{
			margin: 10px 2px;
		}
		input{
			height: 20px;
			border-radius: 5px;
		}
		.item > a{
			text-decoration: none;
			color: #fff;
			display: inline-block;
			background: #333;
			height: 30px;
			width: 50px;
			text-align: center;
			line-height: 30px;

		}
	</style>
</head>
<body>
	<div id="root">
		<form >
			<div class="item"></div>
			<label for="userName">用户名:</label>
			<input type="text" value="猪" id="userName">
			<span id="userNameInfo"></span>
		</div>
		<div class="item"></div>
		<label for="pass">密码:</label>
		<input type="password" id="pass">
   <div class="item">
   	<input id="man" type="radio" name="sex" value="男">
   	<input id="women" type="radio" name="sex" value="女">
   </div>

	</div>
	<div class="item">
		<label ></label>
		<a href="javascript:valify()">提交</a>
	</div>
</form>
<script>
	function id(a) {
		return document.getElementById(a);
	}
	function isLetter(c) {/*是英文字母*/
		var zf = "qwertyuiopasdfghjklmnbvcxz";
		return zf.indexOf(c)!=-1;
	}

	//验证表单的内容是否合法
	//break;跳出循环
	//continue;下一循环
	function valify(argument) {

		//用户名必须是5-16位的英文字母
		var unl = id('userName').value.length;
		var vvv = id('userName').value;

		if(unl<5 || unl>16){

			id('userNameInfo').innerHTML="您的用户名不对劲";
		}else{
			for(var i=0;i<unl;i++){
				var iszf = isLetter(vvv[i]);
				if(!iszf){
					alert("只能用英文");
					//break;
				
				}
			}
		}
		
	}
</script>
</div>


</body>
</html>